<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>bg</title>
	<link rel="stylesheet" href="../scripts/lib/seedsui/seedsui.min.css">
	<style>
		/*滤镜*/
		.bgfilter{
			height:100px;
		}
		.bgfilter:before{
			background-image:url(../images/banner.jpg);
		}
		/*渐变*/
		.gradient{
			height:100px;
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cce6f6), color-stop(100%,#f9fcf4));
		}

		.bgbox{
			width:100%;
			height:60px;
			background-repeat:no-repeat;
			background-color:white;
			box-sizing:border-box;
			border:1px solid #ddd;
			width:90%;
			margin:8px auto;
		}
		p{
			margin-bottom:20px;
			color:#aaa;
		}

		.bgorigin-padding-box{
			background-image:url(../images/marker.svg);
			background-origin:padding-box;
			padding:10px;
		}
		.bgorigin-border-box{
			background-image:url(../images/marker.svg);
			background-origin:border-box;
			border:10px solid #ddd;
			padding:10px;
		}
		.bgorigin-content-box{
			background-image:url(../images/marker.svg);
			background-origin:padding-box;
			border:10px solid #ddd;
			padding:10px;
		}

		.bgmultiple{
			background-image:url(../images/marker.svg),url(../images/marker.svg);
			background-position:0px 0px,38px 20px;
			background-size:40px 40px,28px 28px;
		}
		.bgmultiple-cross{
			background-image: -webkit-cross-fade(url(../images/banner.jpg), url(../images/1.jpg), 0.5);
			background-position:center;
			background-size:cover;
		}

		.bg-clip{
			background-color:coral;
			background-clip:content-box;
			border:1px solid #ddd;
			padding:10px;
		}
		.bg-clip-text{
			/*文字部分*/
			font-weight: bold;
			font-size:35px;
			background-color:black;
			/*背景部分*/
			background-image:url('../images/photo.jpg');
			-webkit-background-clip: text;
			color: transparent;
			background-size: 200px 100px;
			
			background-repeat: repeat-x;
			background-position:left bottom;
			opacity: 1;
		}
		.bg-mask{
			-webkit-mask-image:url(../images/marker.svg);
			-webkit-mask-repeat:no-repeat;
			-webkit-mask-position:center;
			background-color:blue;
		}
	</style>
</head>

<body ontouchstart="">
	<header>
        <div class="titlebar">
            <a class="titlebar-button" href="javascript:back()">
                <i class="icon icon-arrowleft"></i>
            </a>
            <h1 class="titlebar-title">背景</h1>
        </div>
    </header>
	<article>
		<!--background-filter-->
		<div class="sliver">滤镜</div>
		<div class="bgfilter" style="background-image:url(../images/banner.jpg);background-position:center;background-size:cover;"></div>
		<div class="bgfilter before-filter-blur"></div>
		<div class="bgfilter before-filter-sepia"></div>
		<div class="bgfilter before-filter-grayscale"></div>
		<div class="bgfilter before-filter-invert"></div>
		<div class="bgfilter before-filter-saturate"></div>
		<div class="bgfilter before-filter-contrast"></div>
		<div class="bgfilter before-filter-brightness"></div>
		<div class="bgfilter before-filter-hue-rotate"></div>
		<div class="bgfilter before-filter-drop-shadow"></div>
		<!--background-filter-->
		<div class="sliver">渐变</div>
		<div class="gradient"></div>
	    <!--background-origin-->
		<div class="sliver">background-origin（背景起始）</div>
		<p>padding-box</p>
	    <div class="bgbox bg-clip bgorigin-padding-box"></div>
	    <p>border-box</p>
	    <div class="bgbox bgorigin-border-box"></div>
	    <p>content-box</p>
	    <div class="bgbox bgorigin-content-box"></div>
	    <!--background-clip-->
	    <div class="sliver">background-clip</div>
	    <div class="bgbox bg-clip">切掉padding区域</div>
	    <div class="bgbox bg-clip-text">背景图切成文字形状</div>
	    <!--多重图片-->
	    <div class="sliver">多重图片</div>
	    <div class="bgbox bgmultiple"></div>
	    <div class="bgbox bgmultiple-cross"></div>
	    <!--多重图片-->
	    <div class="sliver">剪贴蒙版</div>
	    <div class="bgbox bg-mask"></div>
	</article>
    <script src="../scripts/lib/seedsui/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
	<script>
		//定义exmobi返回
		function back(){history.go(-1);}
	</script>
</body>
</html>
